<template>
  <div>
    <!-- <ImageOne /> -->

    <el-button type="primary" @click="submit" style="margin-top: 30px"
      >提交</el-button
    >
    <el-button type="primary" @click="openAdd">新增</el-button>
    <el-button type="primary" @click="openUpdate">修改</el-button>
    <el-button type="primary" @click="openView">详情</el-button>
    <el-dialog
      :title="titleMap[dialogType]"
      :close-on-click-modal="dialogType !== 'view' ? false : true"
      :visible.sync="dialogFormVisible"
      @close="resetTemp"
      width="800px"
      :key="'myDialog' + dialogIndex"
    >
      <el-form
        ref="dataForm"
        :model="temp"
        label-position="right"
        label-width="110px"
        :disabled="dialogType === 'view'"
      >
        <el-form-item
          label="网格名称"
          prop="wgId"
          :rules="[{ required: true, message: '网格名称不能为空' }]"
        >
          <el-select-tree
            style="width: 100%"
            placeholder="请选择内容"
            :data="orgList"
            default-expand-all
            v-model="temp.wgId"
          ></el-select-tree>
        </el-form-item>
        <el-form-item label="时间范围">
          <TimeFrame :start.sync="temp.startTime" :end.sync="temp.endTime" />
        </el-form-item>
        <el-form-item label="附件信息">
          <FileUpload v-model="temp.fileInfo" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-waves
          type="primary"
          v-if="dialogType !== 'view'"
          @click="submit"
          >保存</el-button
        >
        <el-button v-waves @click="dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import ImageOne from "@/components/Upload/ImageOne.vue";
import FileUpload from "@/components/Upload/FileUpload.vue";
import TimeFrame from "@/components/TimeFrame/index.vue";
import crudMixin from "@/mixin/crudMixin";
import request from "@/utils/request";
import ElSelectTree from "el-select-tree";
export default {
  name: "Menu11",
  components: { TimeFrame, FileUpload, ElSelectTree },
  mixins: [crudMixin],
  data() {
    return {
      fileInfo:
        '[{"name":"0cfc3bbb2df176712dcc6f9c3d99c4e4.jpg","url":"/upload/files/20241026/f4934c6943564043b49936b0448cf45c.jpg"},{"name":"商户信息模板表（非居民小区）.xlsx","url":"/upload/files/20241026/2ce578d62bd749329ae4c96c0ed1138e.xlsx"}]',
      start: "2024-10-01",
      end: "2024-10-10",
      resData: {
        fileInfo:
          '[{"name":"0cfc3bbb2df176712dcc6f9c3d99c4e4.jpg","url":"/upload/files/20241026/f4934c6943564043b49936b0448cf45c.jpg"},{"name":"商户信息模板表（非居民小区）.xlsx","url":"/upload/files/20241026/2ce578d62bd749329ae4c96c0ed1138e.xlsx"}]',
        startTime: "2024-10-01",
        endTime: "2024-10-10",
        wgId: "eacd5f49785744a9ae70a79004b81f3c",
      },
      needGetParam: true,
      orgList: [],
    };
  },
  methods: {
    submit() {
      // console.log(this.fileInfo);
      console.log(this.temp);
    },
    openView() {
      this.dialogType = "view";
      this.dialogFormVisible = true;
      this.temp = Object.assign({}, this.resData);
    },
    getSelectData() {
      this.getOrgData();
    },
    getOrgData() {
      request({
        url: "/publicApi/orgTree",
        method: "get",
      })
        .then((response) => {
          const { data } = response;
          console.log("data: ", data);
          this.orgList = this.formatOrgdata(data);
        })
        .catch((error) => {});
    },
    // 处理机构数据
    formatOrgdata(data) {
      if (data) {
        return data.map((item) => {
          return {
            label: item.orgName,
            value: item.orgId,
            children: this.formatOrgdata(item.children),
          };
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
